<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/googlemaps.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../src/js/markerclusterer.js"></script>
    <script type="text/javascript" src="../src/js/googlemaps.js"></script>
    <script language="javascript">
      $(document).ready(function() {
        $("blockquote").each(function() {
          eval($(this).text());
        });
      });
    </script>
  </head>
  <body>

  
    <h1>Marker clusters</h1>
    <div id="map0" class="map"></div>
    <blockquote>
      var map = $("#map0").googlemaps();
      var points = [
        "51.1, 20.0", "51.2, 20", "51.3, 20","51.4, 20","51.5, 20","51.6, 20",
        "51.7, 20","51.8, 20","51.9, 20","52.0, 20","52.1, 20","52.2, 20","52.3,20",
        "52.4, 20","52.5, 20","52.6, 20","52.7, 20","52.8, 20","52.9, 20",
        "51.1, 20.1","51.2, 20.1","51.3, 20.1","51.4, 20.1","51.5, 20.1",
        "51.6, 20.1","51.7, 20.1","51.8, 20.1","51.9, 20.1","52.0, 20.1",
        "52.1, 20.1","52.2, 20.1","52.3, 20.1","52.4, 20.1","52.5, 20.1",
        "52.6, 20.1","52.7, 20.1","52.8, 20.1","52.9, 20.1","51.1, 20.2",
        "51.2, 20.2","51.3, 20.2","51.4, 20.2","51.5, 20.2","51.6, 20.2",
        "51.7, 20.2","51.8, 20.2","51.9, 20.2","52.0, 20.2","52.1, 20.2",
        "52.2, 20.2","52.3, 20.2","52.4, 20.2","52.5, 20.2","52.6, 20.2",
        "52.7, 20.2","52.8, 20.2","52.9, 20.2","51.1, 20.3","51.2, 20.3",
        "51.3, 20.3","51.4, 20.3","51.5, 20.3","51.6, 20.3","51.7, 20.3",
        "51.8, 20.3","51.9, 20.3","52.0, 20.3","52.1, 20.3","52.2, 20.3",
        "52.3, 20.3","52.4, 20.3","52.5, 20.3","52.6, 20.3","52.7, 20.3",
        "52.8, 20.3","52.9, 20.3"
      ];
      var success = function(markers) {
        for(var i in markers) {
          var marker = markers[i];
          map.setMarkerClick(marker, function() {
            alert('marker clicked');
          });
        }
        map.setCenter("52, 20", 7);
        var mcOptions = {
          gridSize : 50,
          maxZoom : 15,
          styles : [
            {
              width : 32,
              height : 40,
              url : 'images/flower.png'
            }
          ]
        };
        var mc = new MarkerClusterer(map.map, markers, mcOptions);
      };
      var error = function(e1, e2) {
        console.log(e1, e2);
      };
      var options = {
        map : undefined
      };
      map.setMarkersAtAddresses(points, success, error, options);
    </blockquote>
    
  </body>
</html>